<template>
  <view>

    <u-form :model="param" ref="uQueryForm">
      <u-row>
        <u-col span="8">
          <u-form-item label="编码" >
            <u--input
                placeholder="请输入物料编码"
                border="surround"
                v-model="param.materielCD"
                clearable
                @input="debouncedQueryList"
            ></u--input>
          </u-form-item>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="8">
          <u-form-item label="库管" >
            <u--input
                placeholder="请输入库管员"
                border="surround"
                v-model="param.invMange"
                clearable
                @input="debouncedQueryList"
            ></u--input>
          </u-form-item>
        </u-col>
      </u-row>
    </u-form>

    <u-loading-icon :show="loading" text="加载中" textSize="18"></u-loading-icon>
    <u-list @scrolltolower="scroll" :pagingEnabled="pagingEnabled" @scrollWithAnimation="true" :key="listKey">
      <u-list-item v-for="(item, index) in items" :key="index" class="custom-list-item" >
        <view>
          <u-cell :title="`物料编码：${item.materielCD}`"></u-cell>
          <u-cell :title="`物料名称：${formatStr(item.materielName)}`"></u-cell>
          <u-cell :title="`库管员：${formatStr(item.invMange)}`"></u-cell>
          <u-cell :title="`物料总数：${item.sum}`"></u-cell>
          <u-cell :title="`料盘数量：${item.count}   流水号：${index + 1}`"></u-cell>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>
<script>
import UCell from "../../../../uview-ui/components/u-cell/u-cell.vue";
import UList from "../../../../uview-ui/components/u-list/u-list.vue";
import UListItem from "../../../../uview-ui/components/u-list-item/u-list-item.vue";
import ULoadingIcon from "../../../../uview-ui/components/u-loading-icon/u-loading-icon.vue";
import {rackInvList} from "@/api/work/rack/rackInvSum";
import UForm from "../../../../uview-ui/components/u--form/u--form.vue";
import UniDataSelect from "../../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import UFormItem from "../../../../uview-ui/components/u-form-item/u-form-item.vue";
import UInput from "../../../../uview-ui/components/u--input/u--input.vue";
import UCol from "../../../../uview-ui/components/u-col/u-col.vue";
import URow from "../../../../uview-ui/components/u-row/u-row.vue";
import user from "../../../../store/modules/user";
import {formatStr} from "@/api/work/utils";
import debounce from "../../../../uview-ui/libs/function/debounce";

export default {
  name: "index",
  components: {URow, UCol, UInput, UFormItem, UniDataSelect, UForm, ULoadingIcon, UListItem, UList, UCell},
  data() {
    return {
      loading:false,
      pagingEnabled: true,
      items: [],
      listKey: Date.now(),
      total: 0,
      param: {
        pageNum: 0,
        pageSize: 10,
        materielCD: null,
        invMange: null,
      },
    };
  },
  created() {
    this.param.invMange = user.state.nickName;
    this.loadMore();
  },
  methods: {
    formatStr,
    debouncedQueryList() {
      debounce(this.queryList, 500);
    },
    queryList() {
      this.param.pageNum = 0;
      this.items = [];
      this.loadMore();
    },
    scroll() {
      if (this.items.length >= this.total) {
        this.$modal.msgError("没有更多数据了");
        return;
      }
      this.loadMore()
    },
    loadMore() {
      this.loading = true;
      this.param.pageNum = this.param.pageNum + 1;
      rackInvList(this.param).then(res => {
        this.listKey = Date.now();
        this.total = res.total;
        if (res.rows.length > 0) {
          res.rows.forEach(item => this.items.push(item));
        } else {
          this.$modal.msg("无数据！");
        }
        this.loading = false;
      });
    },

  }
}
</script>
<style>
.custom-list-item {
  background-color: #ADD8E6;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}


</style>
